/**
 * Created by GYL on 2018/7/25
 */
import React, { Component } from 'react';
import MyModal from '../../../../components/common/MyModal';
import { Form, Row, Col, Input, message, Checkbox, DatePicker } from 'antd';

import config from "../../../../config";
import style from "./AddModal.less";
const FormItem = Form.Item;

class AddModal extends Component {
    state = {

    };
    componentDidMount() {
        let t = this;
    };
    // modal保存
    onModalSave = () => {
        this.props.form.validateFieldsAndScroll((err, val) => {
            if (!err) {
                this.props.onModalSave(val, this.props.type)
            }
        });
    };
    // 筛选条件组件change事件
    getChangeValue(value, e) {
        let t = this;
        let params = {};
        params[value] = e.target.value;
        t.setState({ params });
    }
    onCheckbox(value, e) {
        let t = this;
        let params = {};
        params[value] = e.target.value;
        t.setState({ params });
    }
    render() {
        let t = this;
        let { getFieldDecorator } = t.props.form;
        let arr = this.props.moddleArr;
        let arr4 = this.props.totalArr;
        let arr2 = this.props.footerArr;
        let arr3 = this.props.bottomArr
        // console.log(arr)

        let arr1 = this.props.headerArr;
        return (
            <div>
                <MyModal
                    {...t.props}

                    width={800}
                    onModalSave={t.onModalSave}>
                    <Form>
                        <Row gutter={48} style={{ boxShadow: "rgba(136, 136, 136, 0.14) 1px 1px 1px 1px" }}>
                            {/* {
                items.map((item, index) => {
                  if (item.type === 'input') {
                    return (
                      <Col key={index} span={item.span || 24} offset={item.offset}>
                        <FormItem colon={false} label={item.label}>
                          {
                            getFieldDecorator(item.paramName, {
                              initialValue: item.initialValue || "",
                              rules: item.rules || null,
                            })(
                              <Input disabled={item.disabled} addonAfter={item.text} placeholder={'请输入'}
                                     onChange={item.onChange}/>
                            )
                          }
                        </FormItem>
                      </Col>
                    )
                  }
                })
              } */}
                            <p>{this.props.customerName == "瓶装气商业用气场所安全检查考核评分表" ? '附表 3' : "附表 2"}</p>
                            <Col><h1 style={{ textAlign: "center", fontSize: 26 }}>{this.props.customerName}</h1></Col>

                            {
                                arr1.map((item, index) => {
                                    return (
                                        <Col style={{ marginBottom: 5 }} span={12}><span>{item.name}</span>:
                                            {
                                                getFieldDecorator(item.paramName, {
                                                    initialValue: item.initialValue ? item.initialValue : '',
                                                    rules: item.rules || null
                                                })(
                                                    <Input onChange={t.getChangeValue.bind(t, item.paramName)} size={config.size} style={item.style}
                                                        placeholder={item.placeholder} disabled={item.disabled} style={{ border: 0, width: "50%" }} />
                                                )
                                            }
                                        </Col>
                                    )

                                })
                            }



                            <table className={style.table_box}>
                                <tr>
                                    <td style={{ width: "10%" }}>序号</td>
                                    <td>考核内容及标准</td>
                                    <td style={{ width: "10%" }}>分值</td>
                                    <td style={{ width: "10%" }}>得分</td>
                                </tr>

                                {
                                    arr.map((item, index) => {
                                        return (
                                            <tr>
                                                <td>{index + 1}</td>
                                                <td style={{ textAlign: "left", paddingLeft: 15, width: "65%" }}>{item.assessContent}</td>
                                                <td style={{ width: "10%" }}>{item.assessScore}</td>
                                                <td>

                                                    {/* <Input placeholder="请输入" size="small" style={{ border: 0,width: "100%"  }}/> */}
                                                    {
                                                        getFieldDecorator(item.paramName, {
                                                            initialValue: item.initialValue ? item.initialValue : '',
                                                            rules: item.rules || null
                                                        })(
                                                            <Input onChange={t.getChangeValue.bind(t, item.paramName)} size={config.size} style={item.style}
                                                                placeholder={item.placeholder} disabled={item.disabled} style={{ border: 0, width: "100%", textAlign: "center" }} />
                                                        )
                                                    }


                                                </td>
                                            </tr>
                                        )
                                    })
                                }
                                {
                                    arr4.map((item, index) => {
                                        return (
                                            <tr>
                                                <td colSpan="2">总分</td>

                                                <td style={{ width: "10%" }}>100</td>
                                                <td style={{ width: "10%" }}>
                                                    {
                                                        getFieldDecorator(item.paramName, {
                                                            initialValue: item.initialValue ? item.initialValue : '',
                                                            rules: item.rules || null
                                                        })(
                                                            <Input onChange={t.getChangeValue.bind(t, item.paramName)} size={config.size} style={item.style}
                                                                placeholder={item.placeholder} disabled={item.disabled} style={{ border: 0, width: "100%", textAlign: "center" }} />
                                                        )
                                                    }
                                                </td>
                                            </tr>
                                        )
                                    })
                                }

                                <tr>
                                    <td style={{ width: "10%" }}>否决项</td>
                                    <td colSpan="3">以下问题存在一项则整表得分为0分</td>
                                </tr>
                                {
                                    arr2.map((item, index) => {
                                        return (
                                            <tr>
                                                <td>{index + 1}</td>
                                                <td style={{ textAlign: "left", paddingLeft: 15, width: "65%" }}>{item.itemVetoContent}</td>

                                                <td colSpan="2">

                                                    {/* <Input placeholder="请输入" size="small" style={{ border: 0,width: "100%"  }}/> */}
                                                    {
                                                        getFieldDecorator(item.paramName, {

                                                            rules: item.rules || null
                                                        })(
                                                            // <Input onChange={t.getChangeValue.bind(t, item.paramName)} size={config.size} style={item.style}
                                                            //     placeholder={item.placeholder} disabled={item.disabled} style={{ border: 0, width: "100%" }} />
                                                            <Checkbox onChange={t.onCheckbox.bind(t, item.paramName)} disabled={item.disabled} defaultChecked={item.initialValue ? item.initialValue : false}></Checkbox>
                                                        )
                                                    }


                                                </td>
                                            </tr>
                                        )
                                    })
                                }


                            </table>

                            {
                                arr3.map((item, index) => {
                                    if (item.type == 'input') {
                                        return (
                                            <Col style={{ marginBottom: 5 }} span={12}><span>{item.name}</span>:
                                                {
                                                    getFieldDecorator(item.paramName, {
                                                        initialValue: item.initialValue ? item.initialValue : '',
                                                        rules: item.rules || null
                                                    })(
                                                        <Input onChange={t.getChangeValue.bind(t, item.paramName)} size={config.size} style={item.style}
                                                            placeholder={item.placeholder} disabled={item.disabled} style={{ border: 0, width: "50%" }} />
                                                    )
                                                }
                                            </Col>
                                        )
                                    } else if (item.type === 'datePicker') {
                                        let disabled = item.disabledDate ? disabledDate : null;
                                        return (
                                            <Col style={{ marginBottom: 5 }} span={12}><span>{item.name}</span>:

                                          {
                                                    getFieldDecorator(item.paramName, {
                                                        initialValue: item.initialValue ? item.initialValue : null
                                                    })(
                                                        <DatePicker size={config.size} disabledDate={disabled} disabled={item.disabled} />
                                                    )
                                                }

                                            </Col>
                                        )
                                    }


                                })
                            }

                        </Row>

                    </Form>
                </MyModal>
            </div>
        )
    }
}
export default Form.create()(AddModal);
